import {
  Component, OnInit, Input, Output, EventEmitter, HostBinding,
  HostListener, ChangeDetectionStrategy
} from '@angular/core';
import { cardAnima } from '../../anims/card.anim';
@Component({
  selector: 'app-project-item',
  templateUrl: './project-item.component.html',
  styleUrls: ['./project-item.component.scss'],
  animations: [
    cardAnima
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectItemComponent implements OnInit {

  // tslint:disable-next-line:no-output-on-prefix
  @Output() onInvite = new EventEmitter<void>();
  // tslint:disable-next-line:no-output-on-prefix
  @Output() onEdit = new EventEmitter<void>();
  // tslint:disable-next-line:no-output-on-prefix
  @Output() onDel = new EventEmitter<void>();
  @Output() itemClick = new EventEmitter<void>();
  @Input() item;

  // 绑定属性 相当于在 调用时  [@card] = 'cardState'
  @HostBinding('@card') cardState = 'out';

  constructor() { }

  ngOnInit() {
  }
  // 监听宿主事件
  @HostListener('mouseenter')
  onMouseEnter() {
    this.cardState = 'hover';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.cardState = 'out';
  }

  // 邀请 按钮点击事件
  onInviteClick(ev: Event) {
    ev.stopPropagation();
    this.onInvite.emit();
  }
  onEditClick(ev: Event) {
    ev.stopPropagation();
    this.onEdit.emit();
  }
  onDelClick(ev: Event) {
    ev.stopPropagation();
    this.onDel.emit();
  }
  onClick() {
    this.itemClick.emit();
  }
}
